<template>
	<view class="con">
		<u-navbar title="任务详情" :title-size="36" :title-width="500" title-color="#fff" back-icon-name="arrow-left"
			back-icon-color="#fff" :background="background" :custom-back="goBack">
		</u-navbar>
		<view class="content">
			<div class="space"></div>
			<div class="listBox">
				<div class="title">基本信息</div>
				<!-- 积水险情 -->
				<div class="baseInfo" v-if="type==1">
					<ul>
						<li><label>任务类型</label><span>{{taskDetail.typeLable}}</span></li>
						<li><label>任务地点</label><span>{{taskDetail.address}}</span></li>
						<li><label>发生时间</label><span>{{ taskDetail.happenTime }}</span></li>
						<li><label>积水影响</label><span>{{taskDetail.impactLable}}</span></li>
						<li><label>积水深度</label><span>{{taskDetail.depthLable}}</span></li>
						<li><label>积水面积</label><span>{{taskDetail.areaLable}}</span></li>
						<li><label>备注说明</label><span>{{taskDetail.description}}</span></li>
					</ul>
				</div>
				<!-- 工程险情 -->
				<div class="baseInfo" v-if="type==2">
					<ul>
						<li><label>任务类型</label><span>{{taskDetail.typeLable}}</span></li>
						<li><label>任务地点</label><span>{{taskDetail.address}}</span></li>
						<li><label>发生时间</label><span>{{ taskDetail.happenTime }}</span></li>
						<li><label>工程险情</label><span>{{taskDetail.dangerTypeLable}}</span></li>
						<li><label>影响面积</label><span>{{taskDetail.dangerAreaLable}}</span></li>
						<li><label>影响人口</label><span>{{taskDetail.affectPopulation}}</span></li>
						<li><label>备注说明</label><span>{{taskDetail.description}}</span></li>
					</ul>
				</div>

				<!--人员转移详情-->
				<div class="baseInfo" v-if="type==3">
					<ul>
						<li><label>任务类型</label><span>{{taskDetail.typeLable}}</span></li>
						<li><label>任务地点</label><span>{{taskDetail.address}}</span></li>
						<li><label>任务描述</label><span>{{ taskDetail.description }}</span></li>
						<!-- <li><label>安置点</label><span>{{taskDetail.dangerTypeLable}}</span></li> -->
					</ul>
				</div>

				<!--物资调度详情-->
				<div class="baseInfo" v-if="type==4">
					<ul>
						<li><label>任务类型</label><span>{{taskDetail.typeLable}}</span></li>
						<li><label>物资仓库</label><span>{{taskDetail.materialStoreName}}</span></li>
						<li><label>仓库物资</label><span>
								<span v-for="item in taskDetail.materials">{{item.materialName}} :
									{{ item.materialNumber }}</span>
							</span></li>
						<li><label>任务描述</label><span>{{ taskDetail.description }}</span></li>
					</ul>
				</div>

				<!--力量调度详情-->
				<div class="baseInfo" v-if="type==5">
					<ul>
						<li><label>任务类型</label><span>{{taskDetail.typeLable}}</span></li>
						<li><label>防汛队伍</label><span>{{taskDetail.floodTeamName}}</span></li>
						<li><label>调度数量</label><span>{{taskDetail.dispatchNum}}</span></li>
						<li><label>任务描述</label><span>{{ taskDetail.description }}</span></li>
					</ul>
				</div>

				<div class="imgList" v-if="type==1 || type==2 ">
					<span class="name">现场照片</span>
					<view class="uni-uploader__files" v-if="taskDetail.urls">
						<block v-for="(image,index) in taskDetail.urls" :key="index" v-if="image.indexOf('jpg')>-1 || image.indexOf('jpeg')>-1 || image.indexOf('png')>-1 || image.indexOf('bmp')>-1">
							<view class="uni-uploader__file">
								<image class="uni-uploader__img" :src="image"
									:data-src="image" @tap="previewImage(index,taskDetail.urls)">
								</image>
							</view>
						</block>
						<block v-if="video.indexOf('MP4')>-1||video.indexOf('mp4')> -1 || video.indexOf('ogv')> -1 || video.indexOf('mov')> -1" v-for="(video,index) in taskDetail.urls" :key="'video'+index">
							<view class="uni-uploader__file">
								<video :src="video" @click="playvideo(index)"
									@fullscreenchange="fullscreenchange" :id="'myVideo'+index"></video>
							</view>
						</block>
					</view>
				</div>
			</div>
			<div class="btnBox" v-if="options.status!= '3'">
				<div class="btn" >
				<div class="btn-c" @click="dispose(id,type,taskDetail.floodTeamName)">处置</div>
				<div class="btn-c" v-if="options.status == '2'" @click="goappoint(id,type,options.status)">转派</div>
				<div class="btn-c" v-if="options.status == '1'" @click="goappoint(id,type,options.status)">指派</div>
			</div>
			</div>
			
			<div class="space"></div>
			<div class="listBox">
				<div class="title">详细流程</div>
				<!-- <scroll-view scroll-y="true" style="height: 460rpx;"> -->
				<!-- <uni-steps :options="taskHandleRecords" active-color="#007AFF" direction="column"/> -->
				<!-- </scroll-view> -->
				<u-time-line>
					<u-time-line-item nodeTop="2" v-for="(item,index) in taskHandleRecords" :key="index">
						<!-- 此处自定义了左边内容，用一个图标替代 -->
						<template v-slot:node>
							<view class="u-node">
								<!-- 此处为uView的icon组件 -->
								<u-icon name="calendar" color="#fff" :size="24"></u-icon>
							</view>
						</template>
						<template v-slot:content>
							<view>
								<view class="u-order-desc">{{item.title}}</view>
								<view class="u-order-title">{{item.desc}}</view>
								<view class="u-order-time"></view>
								<view class="uni-uploader__files" v-if="item.url">
								<block v-for="(image,index) in item.url" :key="index" v-if="image.indexOf('jpg')>-1 || image.indexOf('jpeg')>-1 || image.indexOf('png')>-1 || image.indexOf('bmp')>-1">
									<view class="uni-uploader__file">
										<image class="uni-uploader__img" :src="image"
											:data-src="image" @tap="previewImage(index,item.url)">
										</image>
									</view>
								</block>
								<block v-if="video.indexOf('MP4')>-1||video.indexOf('mp4')>-1 || video.indexOf('ogv')>-1 || video.indexOf('mov')>-1" v-for="(video,index) in item.url" :key="'video'+index">
									<view class="uni-uploader__file">
										<video :src="video" @click="playvideo(index)"
											@fullscreenchange="fullscreenchange" :id="'myVideo'+index"></video>
									</view>
								</block>
							</view>
							</view>
						</template>
					</u-time-line-item>
				</u-time-line>
			</div>
		</view>
	</view>
</template>

<script>
	import {
		myMixin
	} from '../../../mixins/mixin.js'
	import taskUtils from '../../../assets/js/taskUtils.js'
	export default {
		name: 'monitorCurve',
		mixins: [myMixin],
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.id = option.id
			
			this.type = option.type
			if(option.options){
				this.options=JSON.parse(option.options)
				
			}else{
				this.options={};
			}
			this.getInfo()
		},
		data() {
			return {
				background: {
					backgroundColor: '#4299f7',
				},
				type: 1,
				id: '',
				taskDetail: [],
				taskHandleRecords: [],
				imgList: [],
				options:{

				},
				src:[],
				handleDtos:[]
			};
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			previewImage(index,list) {
					uni.previewImage({
						current: index, //预览图片的下标
						urls: list, //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
					});
				
			},
			playvideo(index) {
				this.videoContext = uni.createVideoContext('myVideo' + index, this);
				this.videoContext.requestFullScreen({
					direction: 0
				});
				this.videoContext.play()
			},
			fullscreenchange(e) {
				if (!e.detail.fullScreen) {
					this.videoContext.pause()
				}
			},
			goappoint(id,type,status,floodTeamName){
				uni.navigateTo({url: '/pages/scheduling/taskManage/appoint?id='+id+'&type='+type+'&status='+status});
			},
			dispose(id,type,floodTeamName){
				if(type == 1 || type == 2){  //1.积水  2.工程
					uni.navigateTo({url: '/pages/scheduling/taskManage/dispose/waterDispose?id='+id+'&type='+type});
				}else if(type == 3){  //3.人员转移
					uni.navigateTo({url: '/pages/scheduling/taskManage/dispose/personDispose?id='+id+'&type='+type});
				}else if(type == 4){  //4.物资转移
					uni.navigateTo({url: '/pages/scheduling/taskManage/dispose/materialDispose?id='+id+'&type='+type});
				}else if(type == 5){  //5.力量调度
					uni.navigateTo({url: '/pages/scheduling/taskManage/dispose/powerDispose?id='+id+'&type='+type+'&stem='+floodTeamName||''});
				}
			},
			transRecords(handleDtos) {
				const that = this;
				let res = [];
				let flag = 0;
				for (let i = 0; i < handleDtos.length; i++) {
					let content, timestamp;
					let handleDto = handleDtos[i];
					timestamp = handleDto.handleTime;
					let deptSimpleName = handleDto.deptSimpleName || "";
					if (handleDto.handleStatus === 0) {
						content = "【" + handleDto.handlerName + " / " + deptSimpleName + "】新建了任务";
					} else if (handleDto.handleStatus === 1) {
						flag++;
						if (flag === 1) {
							content = "任务指派给【" + handleDto.handlerName + " / " + deptSimpleName + "】";
						} else {
							content = "任务转派给【" + handleDto.handlerName + " / " + deptSimpleName + "】";
						}
					} else if (handleDto.handleStatus === 2) {
						let desc;
						if (handleDto.type == 1) {
							taskUtils.transStagnantHandle(handleDto);
							desc = handleDto.handleWayLable || "";
						} else if (handleDto.type == 2) {
							taskUtils.transDangerHandle(handleDto);
							desc = handleDto.handleWayLable || "";
						} else if (handleDto.type == 3) {
							taskUtils.transPeopleHandle(handleDto);
							desc = handleDto.handleWayLable || "";
						} else if (handleDto.type == 4) {
							taskUtils.transMaterialsHandle(handleDto);
							desc = handleDto.handleWayLable || "";
						} else if (handleDto.type == 5) {
							desc = handleDto.floodTeamName || "";
						}

						desc = desc || "";
						content = "任务处置完成，执行人【" + handleDto.handlerName + " / " + deptSimpleName + "】" + "使用" + desc +
							"方式处置"; // 待补充处置完成说明
						if(handleDto.type==3){
							content="任务处置完成，执行人【" + handleDto.handlerName + " / " + deptSimpleName + "】从"+handleDto.handleWayLable+"转移"
							+handleDto.transferPopulation+"人至"+handleDto.resetLocation;
						}
						if (handleDto.type == 4) {
							content = "任务处置完成，执行人【" + handleDto.handlerName + " / " + deptSimpleName + "】" + "调派" + desc +
								"仓库进行处置";
						}
						if (handleDto.type == 5) {
							content = "任务处置完成，执行人【" + handleDto.handlerName + " / " + deptSimpleName + "】" + "调派" + (handleDto.floodTeamName||'防汛队伍') +
								"进行处置";
						}

					}
					if (handleDto.handleTime) {
						timestamp = handleDto.handleTime.substring(0, handleDto.handleTime.length - 1 - 2);
					}
					res.push({
						title: timestamp,
						desc: content
					})
				}

				return res;
			},
			urlSelect(items){
				if(items!=null&&items.indexOf("1")>-1){
							if (items.indexOf('jpg') > -1 || items.indexOf('jpeg') > -1 || items.indexOf('png') >-1 || items.indexOf('bmp') > -1) {
								
									return this.defaultPost + items.replace(/\\/g,'/')
								
						}
						}
			},
			getInfo(){
				this.$api.reqApi.taskDetail({
				id: this.id
			}).then(res => {
				if (res.code == 200) {
					const that = this;
					this.options.status = res.data.taskInfoVo.status
					let item = res.data.taskInfoVo;
					this.handleDtos = res.data.handleDtos
					taskUtils.transType(item);
					if (res.data.taskInfoVo.type == 1) { //内涝积水
						taskUtils.transStagnantDepth(item);
						taskUtils.transStagnantImpact(item);
						taskUtils.transStagnantArea(item);
					} else if (res.data.taskInfoVo.type == 2) { //工程险情
						taskUtils.transDangerType(item);
						taskUtils.transDangerAera(item);;
					} else if (res.data.taskInfoVo.type == 3) { //人员转移
					} else if (res.data.taskInfoVo.type == 4) { //物资调度
						taskUtils.transMaterials(item);
					} else if (res.data.taskInfoVo.type == 5) { // 力量调度
					}
					that.taskDetail = item;
					
					// let list = []
					// list = that.taskDetail.urls.map((items) => { //将图片筛选出来 放进新数组中
					// 	this.urlSelect(items)
					// })
					
					that.taskDetail.urls.forEach(ele=>{
						this.src.push(that.defaultPost +ele.replace(/\\/g,'/'))
					})
					that.taskDetail.urls = this.src
					// that.imgList = list.filter(item => item != "")
					
					that.taskHandleRecords = that.transRecords(res.data.handleDtos);
					let arr = []
					res.data.handleDtos.forEach((ele,i)=>{
						if(ele.urls){
							arr = []
							ele.urls.forEach((item)=>{
								item = this.urlSelect(item)
								arr.push(item)
							})
							that.taskHandleRecords[i].url = arr
						}else{
							that.taskHandleRecords[i].url = ''
						}
					})
				}
			})
			}
		},
		mounted() {
			
		}
	}
</script>

<style lang="scss" scoped>
.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}
	.u-time-axis{
		padding-left: 80rpx;
		padding-right: 40rpx;
	}
	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}
	
	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}
	
	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}
.btnBox{
	width: 100%;
	padding: 30rpx;
}
	.btn{
			display: flex;
			margin-top: 20rpx;

			.btn-c {
				margin-top: 10rpx;
				width: 303rpx;
				height: 64rpx;
				font-size: 28rpx;
				background-color: rgb(240, 242, 244);
				color: #000;
				border-radius: 8px;
				line-height: 64rpx;
				text-align: center;
				margin-right: 20rpx;
			}
			}
	.uni-uploader__files {
		display: flex;
		flex-wrap: wrap;

		.uni-uploader__file {
			width: 168rpx;
			height: 168rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			position: relative;

			uni-image,
			uni-video {
				width: 100%;
				height: 100%;
			}

			&:nth-child(3n) {
				margin-right: 0rpx;
			}

			.close {
				width: 48rpx;
				height: 48rpx;
				background: url(../../../assets/images/home/icon_del.png) no-repeat 0 0;
				background-size: 100%;
				display: inline-block;
				position: absolute;
				top: -12rpx;
				right: -12rpx;
				z-index: 9;
			}
		}
	}

	.con {
        background-color: #fff;
		min-height: 100%;
       .space{
			content: "";
			display: inline-block;
			width: 100%;
			height: 30rpx;
			background-color: #f5f6fa;
		}
		
		.listBox {
			// background-color: #fff;
			// margin-top: 30rpx;
			padding: 0 20rpx;
		}
	}

	.title {
		font-weight: bold;
		margin-bottom: 32rpx;
		border-bottom: 1px solid #dde0e4;
		height: 90rpx;
		line-height: 90rpx;
		// &::before {
		// 	content: "";
		// 	display: inline-block;
		// 	height: 40rpx;
		// 	width: 2px;
		// 	background-color: #007AFF;
		// 	vertical-align: bottom;
		// 	margin-right: 10rpx;
		// }
	}

	.baseInfo {
		li {
			line-height: 56rpx;
			width: 100%;
			// height: 56rpx;

			span {
				color: #333333;
				width: 500rpx;
				// text-overflow: ellipsis;
				// white-space: nowrap;
				// overflow: hidden;
				display: inline-block;
				// float: left;
				font-weight: bold;
			}
		}
	}

	::v-deep .u-steps .u-steps__item--column .u-steps__item__line {
		height: 84%;
		top: 57%;
	}

	.imgList {
		margin-bottom: 30rpx;

		.name {
			margin-bottom: 20rpx;
			display: block;
			line-height: 56rpx;
			width: 100%;
			height: 56rpx;
			color: #666666;
			font-size: 28rpx;
		}
	}

	#imgeVideosContainer {
		img {
			width: 120rpx;
			height: auto;
			margin-right: 20rpx;
		}
	}

	::v-deep .uni-label-pointer {
		width: 200rpx;
		display: inline-block;
		font-size: 28rpx;
		color: #666666;
		float: left;
	}

	::v-deep .uni-steps__column-title {
		font-size: 28rpx;
		color: #666666 !important;
	}

	::v-deep .uni-steps__column-desc {
		font-size: 28rpx;
		color: #333 !important;
		font-weight: bold;
		margin-top: 8rpx;
	}

	::v-deep .uni-steps__column-text {
		border-bottom-style: solid;
		border-bottom-width: 0px !important;
		border-bottom-color: #e5e5e5;
	}
	::v-deep .uni-steps__column-circle,::v-deep .uni-steps__column-check{
		width: 48rpx;
		height: 48rpx;
		background-color:#fff !important;
		border: 1px solid #ddd;
		border-radius: 200rpx;
		// margin: 0;
		// padding: 2px 0px;
		&::before{
			content: "";
			display: inline-block;
			width: 30rpx;
			height: 30rpx;
			background: url(../../../assets/images/home/icon_time.png) no-repeat 0 0;
			background-size: 100% 100%;
			margin: 9rpx;
		}
		.uni-icons{
			display: none;
		}
	}
	::v-deep .uni-steps__column-line{
		background-color: #dde0e4 !important;
	}
	::v-deep .uni-steps__column-line-item:last-child .uni-steps__column-line--after,::v-deep .uni-steps__column-line-item:first-child .uni-steps__column-line--before{
		background-color: transparent!important;
	}
</style>
